<template>
    <div class="person">
        <van-row>
                <van-col span="12">
                    <van-field
                    v-model="itemvalue"
                    is-link
                    readonly
                    label="项目"
                    placeholder="选择项目"
                    @click="itemshow = true"
                    />
                </van-col>
                <van-col span="12">
                    <van-field
                    v-model="typevalue"
                    is-link
                    readonly
                    label="类型"
                    placeholder="任务类型"
                    @click="typeshow = true"
                    />
                </van-col>
        </van-row>
        
        <van-row>
            <van-col span="8">
                <van-button plain type="primary">加减分规则</van-button>
            </van-col>
            <van-col span="5">
                <van-button type="success">登录</van-button>
            </van-col>
            <van-col span="11">
                <van-field left-icon="search" placeholder="搜索"
                 style="border: 1px solid; border-radius: 10px;"></van-field>
            </van-col>
        </van-row>

        <van-cell-group style="margin-top: 10px;">
            <p>课程：{{ itemname }}</p>
        </van-cell-group>

        <van-row style="margin-top: 10px;">
            <van-col span="6">
                任务分：0分
            </van-col>
            <van-col span="6">
                加分：0分
            </van-col>
            <van-col span="6">
                课程分：0分
            </van-col>
            <van-col span="6">
                总评：0分
            </van-col>
        </van-row>

        <van-row style="margin-top: 10px;">
            <van-col span="6">
                学号：
            </van-col >
            <van-col span="6">
                姓名：
            </van-col >
            <van-col span="6">
                班级：
            </van-col>
            <van-col span="6">
                <van-button type="warning" >成绩明细</van-button>
            </van-col>
        </van-row>

        <van-cell-group v-for="(item ,index) in ll" :key="index" style="margin-top: 10px;">
            <van-cell :title="item.text" icon="todo-list-o " value="未评分">
            </van-cell>
            <van-cell title="回答"value="未提交" id="not">
            </van-cell>
        </van-cell-group>

        <van-popup v-model:show="itemshow" round position="top">
            <van-picker
                :columns="item"
                @cancel="itemshow = false"
                @confirm="onConfirm1"
            />
        </van-popup>
        <van-popup v-model:show="typeshow" round position="top">
            <van-picker
                :columns="type"
                @cancel="typeshow = false"
                @confirm="onConfirm2"
            />
        </van-popup>
    </div>
</template>
<script setup>
import { ref } from 'vue';

const type = [
      { text: '刷题', value: '1' },
      { text: '作品', value: '2' },
    ];
const item = [
      { text: '前端框架应用项目开发', value: '1',data:[
      {text:"vue3开发初体验"},
      {text:"vue3组件化开发"},
      {text:"vue前端基础刷题"},
      {text:"vue3路由使用"},
      {text:"电影列表项目"},
      {text:"vue自动化测试"},
      {text:"状态管理pinia"},
      {text:"使用ui组件库"},
] },
      { text: '24春季技能综合实践', value: '2' ,data:[
    {text:""}
]},
      { text: '24春季进销存系统设计与实现', value: '3' ,data:[
      {text:"复习"},
      {text:"库表设计"},
      {text:"员工管理"},
      {text:"客户管理"},
      {text:"销：送气单"},
      {text:"用编程改进送气单"},
      {text:"客户对账"},
      {text:"小考"},
]},
      { text: '后端技术与项目开发', value: '4',data:[
      {text:"thymeleaf 模板、登录模拟"}
] },
      { text: '软件测试技术', value: '5' ,data:[
      {text:"白盒测试-路径覆盖"}
]},
      { text: '移动web设计与小程序开发', value: '6' ,data:[
      {text:"HTML+CSS+JavaScript实现时钟效果"},
      {text:"手写轮播图"},
      {text:"APP商城"}
]},
      { text: '毕业设计与毕业论文', value: '7' ,data:[
      {text:"填写毕业设计题目"},
      {text:"填写毕业设计题目"},
      {text:"vue前端基础刷题"},
      {text:"毕业设计作品展示"},
      {text:"提交论文电子稿"},
      {text:"毕业答辩"},
      {text:"毕业寄语"}
]},
      { text: '岗位实习', value: '8',data:[
      {text:"社会实践"},
      {text:"求职简历撰写"},
      {text:"填写实习备案表与签订三方协议"},
      {text:"vue3路由使用"},
      {text:"实习工作情况截图"},
      {text:"实习工作情况截图"}
] },
    ];
const ll = ref([{
    text:""
}])

    const itemvalue = ref('');
    const itemshow = ref(false);

    const typevalue = ref('');
    const typeshow = ref(false);
 
    const itemname = ref('')

    const onConfirm1 = ({selectedOptions}) => {
        console.log(selectedOptions);
        
      itemshow.value = false;
      itemvalue.value = selectedOptions[0].text;
      itemname.value = selectedOptions[0].text;
      ll.value = selectedOptions[0].data
    };
    const onConfirm2 = ({selectedOptions}) => {
        console.log(selectedOptions);
        
      typeshow.value = false;
      typevalue.value = selectedOptions[0].text;
      
    };
</script>
<style>
.person{
    width: 400px;
    height: 700px;
    border: 1px solid;
    overflow-y: auto;
}
.van-cell__title{
    width: 30px;
}
/* #not:nth-child(2){
    color: red;
} */
#not .van-cell__value{
    color: red;
}
</style>